<template>
	<view id="index">
		<view class="content">
			<view class="top">
				<view class="topTitle">车间智能化平台</view>
			</view>
			<uni-notice-bar style="height: 5vh;" show-icon scrollable text="欢迎来到中德智能化平台......" />
			<view class="bottom">
				<view class="bottomItem">
					<view class="item" @click="pageTo('inspection')">
						<view class="iconBox">
							<uni-icons type="gear-filled" size="55" color="#5384e2"></uni-icons>
						</view>
						<view class="bottomText">点检</view>
					</view>
				</view>
				<view class="bottomItem">
					<view class="item" @click="pageTo('maintain')">
						<view class="iconBox">
							<uni-icons type="heart-filled" size="55" color="#5384e2"></uni-icons>
						</view>
						<view class="bottomText">保养</view>
					</view>
				</view>
				<view class="bottomItem">
					<view class="item" @click="pageTo('repaire')">
						<view class="iconBox">
							<uni-icons type="refresh-filled" size="55" color="#5384e2"></uni-icons>
						</view>
						<view class="bottomText">维修</view>
					</view>
				</view>
				<view class="bottomItem">
					<view class="item" @click="pageTo('scene')">
						<view class="iconBox">
							<uni-icons type="shop" size="55" color="#5384e2"></uni-icons>
						</view>
						<view class="bottomText">5s</view>
					</view>
				</view>
				<view class="bottomItem">
					<view class="item" @click="pageTo('lesson')">
						<view class="iconBox">
							<uni-icons type="settings" size="55" color="#5384e2"></uni-icons>
						</view>
						<view class="bottomText">课程</view>
					</view>
				</view>
				<view class="bottomItem">
					<view class="item" @click="pageTo('excused')">
						<view class="iconBox">
							<uni-icons type="compose" size="55" color="#5384e2"></uni-icons>
						</view>
						<view class="bottomText">请假</view>
					</view>
				</view>
			</view>
		
		</view>
		<view class="footer">
			<view class="homePage" style="color:#649adf">
				<img src="static/images/tabbar/home_.png" alt="" />
				首页
			</view>
			<!-- <view class="workPage" @click="changePage('text')">
				<img src="static/images/tabbar/work.png" alt="" />
				消息
			</view> -->
			<view class="minePage" @click="pageTo('my')">
				<img src="static/images/tabbar/mine.png" alt="" />
				我的
			</view>
		</view>
	</view>
</template>

<script>
	// import { getInfo } from '@/common/request/api/login'
	export default {
		data() {
			return {
			
			}
		},
		components: {
		},
		computed: {
		},
		mounted() {
		},
		async onLoad() {
		},
		async onShow() {},
		methods: {
			pageTo(address) {
				uni.navigateTo({
					url: `/pages/${address}/index`
				});	
			},
			changePage(address) {
				uni.navigateTo({
					url: `/pages/${address}/student/index`
				});			
			}
		}
	}
</script>

<style>
	.page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;		
	}
	.content {
		width: 100vw;
		height: 90vh;
		color: #fff;
		background-color: #f8f8f8;
		/* border: 1px solid green; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top {
		background-image: url('@/static/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 25vh;
		color: #fff;
	}

	.topTitle {
		font-size: 8vw;
		font-weight: 600;
		/* margin-bottom: 3vh; */
		letter-spacing: 0.8vw;
	}
	.typeText {
		font-size: 6vw;
	}

	.topBut {
		background-color: #556cff;
		border-radius: 25px;
		font-size: 5vw;
		padding: 10px 25px;
		box-shadow: 3px 3px rgba(0, 0, 255, 0.2);
	}
	.bottom {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		height: 60vh;
		justify-items: center;
		align-items: center;
		/* border: 1px solid red; */
	}

	.bottomItem {
		width: 18vh;
		height: 18vh;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.bottomItem:nth-child(1) .item,
	.bottomItem:nth-child(4) .item,
	.bottomItem:nth-child(5) .item{
		background-color: #a5cdfb;
	}
	.bottomItem:nth-child(2) .item,
	.bottomItem:nth-child(3) .item,
	.bottomItem:nth-child(6) .item{
		background-color: #649adf;
	}

	.item {
		width: 100%;
		border-radius: 20px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 1vw 1vw 1vw #999;
	}

	.iconBox {
		background-color: #fff;
		border-radius: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bottomText {
		font-size: 5vw;
		text-shadow: 1px 1px #999999;
	}
	
</style>